<template>
    <div>
        <div >
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="住户管理">
                    <el-select v-model="user" placeholder="请选择">
                        <el-option
                                v-for="item in users"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报修状态">
                    <el-select v-model="Repair" placeholder="请选择">
                        <el-option
                                v-for="item in Repairs"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约日期">
                    <el-date-picker
                            v-model="reserve"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="精准查询">
                    <el-select v-model="precise" placeholder="请选择">
                        <el-option
                                v-for="item in precises"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findAll()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="houseingName"
                        label="报修房屋"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="维修项目"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="theTitle"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="报修人">
                </el-table-column>
                <el-table-column
                        prop="appointmentTime"
                        label="预约日期">
                </el-table-column>
                <el-table-column
                        prop="maintenanceProcess"
                        label="维修状态">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button @click="shnehe(scope.row.maintenanceId)" type="text" size="small">审核</el-button>
                        <el-button @click="delete1(scope.row.maintenanceId)"  type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //住户类型
                users: [{
                    value: '选项1',
                    label: '全部'
                }, {
                    value: '选项2',
                    label: '业主'
                }, {
                    value: '选项3',
                    label: '亲戚'
                }, {
                    value: '选项4',
                    label: '租户'
                }, {
                    value: '选项5',
                    label: '朋友'
                }],
                user: '',
                //报修状态
                Repairs: [{
                    value: '选项1',
                    label: '全部'
                }, {
                    value: '选项2',
                    label: '审核中'
                }, {
                    value: '选项3',
                    label: '审核通过'
                }, {
                    value: '选项4',
                    label: '审核不通过'
                }],
                Repair:'',
                //预约时间
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                reserve: '',
                //精准查询
                precises: [{
                    value: '1',
                    label: '住户姓名'
                }, {
                    value: '2',
                    label: '手机号码'
                }, {
                    value: '3',
                    label: '证件号码'
                }],
                precise:'',
                input: '',
                //报修记录
                tableData: []
            };

        },
        created() {
            //查询我的基本信息
            this.findAll();

        },
        methods: {
            findAll(){
                this.$axios
                    .get("systemuser/sbaoxiu/findAll", {
                        params: {
                            //获取的周期
                            CommunityId: 1,
                            user: this.user,
                            Repair:this.Repair,
                            reserve:this.reserve,
                            precise:this.precise,
                            input: this.input
                        },
                    })
                    .then((res) => {
                        console.log(res)
                        this.tableData =  res.data;
                    });
            },
            delete1(id){
                    this.$axios.get("systemuser/sbaoxiu/delete",{
                        params:{
                            maintenanceId:id
                        }
                    })
                this.findAll()
            },
            shnehe(id){
                this.$router.push({
                    path: `/Audit/${id}`})
            }
            }
    }
</script>

<style scoped>

</style>
